<template>
  <Content title="转移机台">
    <view class="device-details">
      <view class="content">
        <view class="top-box">
          <view class="info-box">
            <view class="text-box">
              <text class="label">当前设备信息</text>
            </view>
            <view class="text-box">
              <text class="label">设备编号:</text>
              <text class="value">{{ model.deviceNo }}</text>
            </view>
          </view>

          <view class="info-box" style="padding-bottom: 0">
            <view class="title">
              <text class="txt">转移机台</text>
              <view class="value" style="flex: 1">
                <u-input
                  class="box-input"
                  border="none"
                  prefixIcon="search"
                  prefixIconStyle="font-size: 22px;color: #909399"
                  label
                  v-model="search.deviceCode"
                  placeholder="请输入搜索内容"
                  @change="getList(true)"
                  clearable
                ></u-input>
              </view>
            </view>
          </view>
        </view>

        <view class="main-box">
          <List
            ref="orderList"
            :scrollNoData="scrollNoData"
            :data="data"
            @itemClick="itemClick"
            @onRefresh="onRefresh"
            @scrollBottom="scrollBottom"
          ></List>

          <view class="btn-v">
            <view class="but-box">
              <u-button
                class="btn"
                type="primary"
                @click="replaceMold"
                text="转移机台"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import { getPageData } from "@/store/user";
import List from "./components/transferList.vue";
export default {
  components: {
    Content,
    List,
  },
  data() {
    return {
      model: {},
      data: [],
      search: {
        materialCode: "",
        deviceCode: "",
        pageNum: 1,
        pageSize: 10,
      },
      navIndex: 0,
      id: "",
      show: false,
      modalTitle: "",
      radioGroup: "",
      scroll: false,
      scrollNoData: false,
      obj: {},
      pageData: {},
    };
  },
  onShow: function () {},
  onReady: function () {
    this.pageData = getPageData();
    this.search.materialCode = this.pageData.materialCode;
    this.init();
    this.getList();
  },
  computed: {},
  mounted() {},
  methods: {
    init() {
      fetch("get", "/dms/mobile/selectByDeviceCode", null, {
        deviceCode: this.pageData.deviceCode,
      }).then(({ data }) => {
        this.model = Object.assign(this.model, data);
      });
    },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    onRefresh() {
      this.getList(true);
    },
    ok() {},
    itemClick(i) {
      this.obj = this.data[i];
    },
    replaceMold() {
      const that = this;
      if (!that.obj) {
        uni.$emit("openToast", {
          type: "error",
          icon: "error",
          title: "请选中一条数据!",
        });
        return;
      }
      that.$loading.open();
      const data = that.obj;
      fetch("PUT", "/dms/mobile/transferDevice", {
        workCode: that.pageData.workCode,
        id: that.pageData.id,
        workStartTime: that.pageData.workStartTime,
        workEndTime: that.pageData.workEndTime,
        deviceCode: data.deviceNo,
      }).then((res) => {
        that.$loading.close();
        uni.$emit("openToast", {
          type: "success",
          title: res.msg,
          complete() {
            that.show = false;
            that.init();
            that.getList(true);
          },
        });
      });
    },
    scrollBottom(next) {
      const that = this;
      if (!that.scrollNoData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList().then(() => {
          next(that.scrollNoData);
        });
        return;
      }
      next();
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (element) obj[key] = element;
        }
      }
      return fetch("post", "/dms/mobile/transferDevicePage", obj).then(
        ({ data }) => {
          if (that.scroll) {
            if ((data?.records || []).length === 0) {
              that.scrollNoData = true;
            } else {
              that.data.push(...data?.records);
            }
          } else {
            that.data = data?.records || [];
          }
          that.$loading.close();
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;
  padding-bottom: 160rpx;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .main-box {
    flex: 1;
    overflow: auto;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }

  .number-davities-box {
    text-align: center;

    .header {
      margin-bottom: 20rpx;
    }

    .item-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }

  .btn-box {
    display: flex;

    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
